<!DOCTYPE html>
<html>
<head>
    <!--    <meta charset="utf-8">-->
    <meta http-equiv="Access-Control-Allow-Origin" content="*" charset="utf-8"/>
    <!--    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">-->
    <title>角动量探究实验</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />

    <script type="text/javascript" src="js/jquery1.8.3.min.js"></script>
    <script type="text/javascript" src="js/parabola.js"></script>
    <script type="text/javascript" src="js/panel.js"></script>
    <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.sound.min.js"></script>
    <!--        <script src="js/sketch.js"></script>-->
</head>
<style>
    #content{
        position: relative;
        top:5%;
    }
    /*:root{*/
    /*    --main-top: 23%*/
    /*}*/
    #qiang{
        position: absolute;
        left:850px;
        width: 180px;
        height:100px;
        /*top:32%*/
    }
    #zidan{
        position: absolute;
        left:840px;
        width: 25px;
        height:25px;

    }
    /*!*生成小球，并定义初始位置*!*/
    /*#ball {*/
    /*    border-radius: 50%;!*可把正方形变成圆形，50%即可*!*/
    /*    background: #00FF00;*/
    /*    width: 20px;*/
    /*    height: 20px;*/
    /*    position: relative;*/
    /*    top: 30px;*/
    /*    left: 850px;*/
    /*}*/
</style>
<body background="imgs/bg2.jpg">

<!-- 左上角按钮 -->
<div style="font-family:'微软雅黑';float:left;position:absolute;margin:10px 20px ">
    <!--    <a id="reset" href="#">-->
    <!--        <i class="fa fa-eraser  fa-lg"></i> 刻度尺</a>-->
    <a id="setOptions"  href="#" style="color: #e2e2e2">
        <i class="fa fa-rocket fa-lg"></i> 发射子弹</a>
    <a id="stop"  href="#" style="display: none;color: #e2e2e2">
        <i class="fa fa-pause fa-lg"></i> 重置</a>
    <!--    <a id="chart" target="_blank">-->
    <!--        <i class="fa fa-area-chart fa-lg"></i> 轨迹线关系研究</a>-->
    <a id="star" style="color: #e2e2e2;display: none" >
        <i class="fa fa-star fa-lg"></i> 竞赛模式</a>
</div>
<!-- 操作说明 -->
<div id="content" style="color: #e2e2e2">
    <h3>实验说明《普通模式》：</h3>
    <p>1、请您在《普通模式》进行角动量运动探究。直杆为10m。直杆质量和子弹质量为固定值。默认子弹打入直杆后嵌入直杆。</p>
    <p>2、通过调节右侧子弹发射的相关变量来改变直杆抬起高度。点击"重置"按钮，来恢复默认位置。</p>
    <p>3、此页面结束后，请您进入《竞赛模式》进行挑战。</p>
    <p>注：如果遇到页面中按钮点击不了的情况，请更换浏览器重新打开页面。（推荐chrome浏览器）</p>
</div>

<!-- 右上角的滑块 -->
<div id="slider-container">
    <form class="layui-form">
        <div class="layui-form-item">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend style="color: #0C0C0C;font-size:15px;padding: 3px 20px" class="layui-bg-green">击中直杆的位置 /m</legend>
            </fieldset>
            <div class="demo-slider" id="slideTest8_1"></div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend style="color: #0C0C0C;font-size:15px;padding: 3px 10px" class="layui-bg-green">子弹的速度 cm/s</legend>
            </fieldset>
            <div class="demo-slider" id="slideTest8_2"></div>

<!--            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--                <legend style="color: #0C0C0C;font-size:15px;padding: 3px 13px" class="layui-bg-green">圆盘半径 /cm</legend>-->
<!--            </fieldset>-->
<!--            <div class="demo-slider" id="slideTest8_3"></div>-->

<!--            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">-->
<!--                <legend style="color: #0C0C0C;font-size:15px;padding: 3px 13px" class="layui-bg-green">圆盘质量 /kg</legend>-->
<!--            </fieldset>-->
<!--            <div class="demo-slider" id="slideTest8_4"></div>-->

        </div>
    </form>
</div>
<canvas id="canvas" width="480px" height="550px" style="position: absolute;left:350px;top:30%"></canvas>
<!--<input type="text" id="timetext" value=" 周期：00秒00毫秒" readonly style="position: absolute;left:500px;top:150px;font-size: 20px;width: 180px;height:50px;text-align: center"><br>-->
<!--<button type="button" onclick="Reset()"  style="position: absolute;left:570px;top:220px">重置</button>-->
<img  id="qiang" src="imgs/qiang1.png" >
<img  id="zidan" src="imgs/ball.png" >
<h2 style="position: absolute;left:120px;top:25%;color: #e2e2e2">直杆抬起的高度为：</h2>
<h2 id="gaodu" style="position: absolute;left:300px;top:25%;color: #e2e2e2;display: none"></h2>
<script type="text/javascript">
    var jsonData = JSON.parse(window.name); //将window.name转化为json对象
    var user_id=jsonData.userid;
    var user_name=jsonData.username;

    var xx=3,v=15,m1=30,m2=10
    var tryArray=new Array();   // 存取每次运动的数据

    var status=false;
    var shuzu1=new Array();
    var shuzu2=new Array();
    // var shuzu3=new Array();
    // var shuzu4=new Array();




    layui.use('slider', function(){
        var $ = layui.$
            ,slider = layui.slider;

        // 击中直杆的位置
        slider.render({
            elem: '#slideTest8_1'
            ,input: true
            ,min:1
            ,max:10
            ,value:3
            ,change: function(value){
                shuzu1.push(value);
            }
        });
        //子弹的速度
        slider.render({
            elem: '#slideTest8_2'
            ,input: true //输入框
            ,min:10
            ,max:20
            ,value:15
            ,change: function(value){
                shuzu2.push(value);
            }
        });
        // //圆盘半径
        // slider.render({
        //     elem: '#slideTest8_3'
        //     ,input: true //输入框
        //     ,min:10
        //     ,max:60
        //     ,value:20
        //     ,change: function(value){
        //         shuzu3.push(value);
        //     }
        // });
        // // 圆盘质量
        // slider.render({
        //     elem: '#slideTest8_4'
        //     ,input: true //输入框
        //     ,min:10
        //     ,max:50
        //     ,value:10
        //     ,change: function(value){
        //         shuzu4.push(value);
        //     }
        // });
    });
    // 滑块拉完后的变化
    $(function(){
        $(document).on('mouseup',(function(){
            $(document).off('mousemove')
            if(shuzu1.length==0){
                xx=3;

            }
            else{
                xx=shuzu1[shuzu1.length-1];
            }
            if(shuzu2.length==0){
                v=15;
            }
            else{
                v=shuzu2[shuzu2.length-1];
            }
            // if(shuzu3.length==0){
            //     l2=20;
            // }
            // else{
            //     l2=shuzu3[shuzu3.length-1];
            // }
            // if(shuzu4.length==0){
            //     m2=10;
            // }
            // else{
            //     m2=shuzu4[shuzu4.length-1];
            // }

        }));
    });



    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var colorList = "abcdefABCDEF0123456789".split("");
    var colorListLength = colorList.length;
    var color = function() {
        var _color = "#";
        for(var i=0; i<6; i++) {
            _color += colorList[Math.round(Math.random()*colorListLength)];
        }
        return _color;
    };
    //画圆
    var createArc = function(attrs) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = attrs.color || color();
        ctx.arc(attrs.x, attrs.y, attrs.r, 0, Math.PI*2);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    };
    //画线
    var createLine = function(from, to) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(from.x, from.y);
        ctx.lineTo(to.x, to.y);
        ctx.lineWidth=15;
        ctx.stroke();
        ctx.closePath();
        ctx.restore();
    }

    var createAll = function(to) {
        createArc({x: 300, y: 0, r: 20, color: "black"});//固定端的小圆
        // createArc({x: to.x, y: to.y, r: l2, color: "black"});//大圆
        createLine({x: 300, y: 0}, {x: to.x, y: to.y});

    };
    var minAngle = 0;
    // var maxAngle = Math.PI*2/3;

    // 1/(30*Math.sqrt[(0.5*m2*l2*l2+(1/3*m1+m2)*l1*l1)/(9.8*l1*(0.5*m1+m2))])
    var angle = minAngle;
    var mode = "right";
    var fashe=false;
    var kaishi=false
    //计时
    var hour,minute,second;//时 分 秒
    hour=minute=second=0;//初始化
    var millisecond=0;//毫秒
    var int;
    var chongzhi;
    var height1=0;

    var interval = setInterval(function() {
        var y = 300*Math.sin(angle+Math.PI/2) //0+
        var x = 300*Math.cos(angle+Math.PI/2)+300; //250+
        var qq = document.getElementById("qiang").style
        //手枪的位置从距离top31%-64% 平均10等分
        var _margin=(3.3*xx+31)+''+"%"
        var qqq= qq.setProperty("top", _margin);

        var zd = document.getElementById("zidan").style
        //手枪的位置从距离top31%-64% 平均10等分
        var _zd=(3.3*xx+31)+''+"%"
        var zidan= zd.setProperty("top", _zd);


        var vv=v/100;
        var h=10*(0.3*vv*xx)*(0.3*vv*xx)/(1/3*0.3*10*10+0.3*xx*xx)*(2*0.3*9.8*xx+0.3*9.8*10)
        var height=h.toFixed(2)   //抬起的高度
        height1=height;
        var h1=(10-h)/10
        var maxAngle=Math.acos(h1).toFixed(3)
        var addAngle = Math.PI/60;
        switch(mode) {
            case "left":
                ctx.clearRect(0, 0, 1000, 600);
                createAll({x: x, y: y});
                if(kaishi){
                    // console.log(addAngle)
                    angle += addAngle;
                    if(angle > maxAngle) {
                         // mode = "right";
                        angle -= addAngle;
                        return;
                    }
                    document.getElementById("gaodu").style.display="inline"
                }
                break;
            case "right":
                // console.log(angle)
                ctx.clearRect(0, 0, 1000, 600);
                createAll({x: x, y: y});
                angle -= addAngle;
                if(angle <=minAngle) {
                    mode = "left";
                    angle += addAngle;
                    kaishi=false
                    //计时暂停
                    // window.clearInterval(int);
                    return;
                }
                break;
        }
        if(chongzhi){
                //子弹恢复原位置
                var zd = document.getElementById("zidan").style
                var _zd=(3.3*xx+31)+''+"%"
                var zidan= zd.setProperty("top", _zd);
                document.getElementById("zidan").style.display="inline";
                document.getElementById("zidan").style.left="830px"
                chongzhi=false;

        }
    }, 50);


    $("#setOptions").click(function (event) {
        document.getElementById("star").style.display="inline"
        document.getElementById("slider-container").style.display="none"
        document.getElementById("gaodu").innerHTML=height1+"米";
        var x,y,k=0,t;
        //x是水平方向移动路径；y是垂直方向的；k记录次数，可与0.1相乘得时间；t记录setInterval的返回id，用于clearInterval
        var int = setInterval(function(){
            var zb = document.getElementById("zidan").style
            var x=830-5*k
            var _left=(830-10*k)+''+"px"
            var left= zb.setProperty("left", _left);
            k++;
            var la=document.getElementById("zidan").style.left
            if(la<="650px"){
                kaishi=true;//直杆开始运动
                document.getElementById("zidan").style.display="none"
                clearInterval(int);//小球达到边界时，清除setInterval
            }
        },1000/v);//每0.1s调用一次setInterval的function

        document.getElementById("stop").style.display="inline";
       document.getElementById("setOptions").style.display="none";
       // setTimeout(function (){kaishi=true;},2000)
        status=true;
        fashe=true
        if(fashe){
            if(isNaN(shuzu1[shuzu1.length-1])){
                shuzu1[shuzu1.length-1]=3;
            }
            if(isNaN(shuzu2[shuzu2.length-1])){
                shuzu2[shuzu2.length-1]=15;
            }
            tryArray.push(shuzu1[shuzu1.length-1],shuzu2[shuzu2.length-1]); // 3i高度，3i+1初速度，3i+2发射角度
            // console.log(tryArray);
            fashe=false;
        }
        $.ajax({
            url:'http://121.4.82.48:8082/ordinary',
            type:'GET',
            data:{
                'xx':shuzu1[shuzu1.length-1],
                'v':shuzu2[shuzu2.length-1],
                'h':height1,
                'user_id':user_id,

            },
            success() {
                console.log(shuzu1[shuzu1.length-1],shuzu2[shuzu2.length-1],height1,
                    user_id+"成功")
            },
            error(){
                console.log('失败')
            }
        })
    })

    $("#stop").click(function (event) {
        document.getElementById("setOptions").style.display="inline";
        document.getElementById("slider-container").style.display="inline"
        document.getElementById("stop").style.display="none";
        document.getElementById("gaodu").style.display='none'
        //直杆到中间
        mode = "right";
        status=false;
        chongzhi=true;
    });


    $("#star").click(function (event) {
        // 点击竞赛模式打包用户信息
        var userid2 = user_id;//获取填写的id
        var username2 = user_name;//获取填写的name
        var jsonData2 = {"userid2":userid2,"username2":username2}; //转化为json格式
        window.name = JSON.stringify(jsonData2); //window.name只接受字符串格式，所以需要把json转换一下
        window.location.replace("competition.html");

    })



</script>
</body>
</html>